<template>
  <div class="content-box mtop-20">
    <div class="daily-header">
      <div class="the-day">
        <div class="day font-weight">{{ today }}</div>
      </div>
      <div class="text mleft-30">
        <div class="font-24 font-weight">每日歌曲推荐</div>
        <div class="desc">根据你的音乐口味生成,每天6:00更新</div>
      </div>
    </div>
    <!-- 操作按钮 -->
    <div class="describle-btns">
      <a-button class="mright-10 br-30 play-all" type="danger" @click="playAll">
        <a-icon class="font-20" type="caret-right" />播放全部
      </a-button>
      <a-button class="mright-10 br-30 play-all">
        <a-icon class="font-20" type="folder-add" />收藏全部
      </a-button>
    </div>
    <div class="line mtop-20"></div>
    <MyList :columns="columns" :dataSource="dataSource" />
  </div>
</template>

<script>
import { recommendSongs } from '@/api/detail';
import MyList from '@/components/Detail/List';

export default {
  name: 'dailySpecial',

  components: {
    MyList
  },

  data() {
    return {
      columns: [
        {
          title: '',
          dataIndex: 'index',
          key: 'index',
          width: 50,
          scopedSlots: { customRender: 'key' }
        },
        {
          title: '',
          dataIndex: 'operation',
          key: 'operation',
          width: 30,
          scopedSlots: { customRender: 'operation' }
        },
        {
          title: '音乐标题',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true,
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '歌手',
          dataIndex: 'ar',
          key: 'ar',
          ellipsis: true,
          scopedSlots: { customRender: 'ar' }
        },
        {
          title: '专辑名',
          dataIndex: 'al',
          key: 'al',
          ellipsis: true,
          scopedSlots: { customRender: 'al' }
        },
        {
          title: '时长',
          dataIndex: 'duration',
          key: 'duration',
          ellipsis: true,
          width: 80,
          scopedSlots: { customRender: 'duration' }
        },
      ],
      dataSource: []
    };
  },

  computed: {
    today() {
      const day = new Date().getDate();
      return day < 10 ? `0${day}` : day;
    }
  },

  created() {
    // 每天早上6点清除一次本地存储,需要更新一次推荐列表
    if (new Date().getHours() >= 6) {
      localStorage.removeItem('dailySong');
      this.getRecommendSongs();
      return;
    }
    const songList = JSON.parse(localStorage.getItem('dailySong'));
    if (songList && songList.length) this.dataSource = songList;
  },

  methods: {
    async getRecommendSongs() {
      const res = (await recommendSongs()).data;
      this.dataSource = Object.freeze(res.data.dailySongs);
      // 存到localStorage中,避免重复调用接口
      localStorage.setItem('dailySong', JSON.stringify(this.dataSource));
    },
    playAll() {
      // 当前需要播放的音乐信息
      this.$store.commit('main/ISPLAYED', true);
      this.$store.commit('detail/AUDIOID', this.dataSource[0]);
      this.$store.commit('detail/AUDIOLIST', this.dataSource);
    }
  },
};
</script>

<style lang="less" scoped>
.content-box {
  height: 98%;
  .daily-header {
    display: flex;
    align-items: center;
    .the-day {
      width: 100px;
      height: 100px;
      background: url(../../../assets/images/calendar.png) 0 0/100% no-repeat;
      .day {
        width: 100px;
        height: 40px;
        font-size: 40px;
        color: #ec4141;
        margin-top: 30px;
        text-align: center;
      }
    }
    .text {
      .desc {
        font-size: 12px;
        color: #676767;
      }
    }
  }
}
</style>